<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html class="app" style="overflow-y: hidden;">

	<head>
		<base href="<%=basePath%>">
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="categoryDescription" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<meta name="renderer" content="webkit">

		<link rel="stylesheet" href="<%=basePath%>view/css/bootstrap.min.css">
		<link rel="stylesheet" href="<%=basePath%>view/css/animate.css" type="text/css" />
		<link rel="stylesheet" href="<%=basePath%>view/css/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="<%=basePath%>view/css/simple-line-icons.css" type="text/css" />
		<link rel="stylesheet" href="<%=basePath%>view/css/app.css" type="text/css" />
		<link rel="stylesheet" href="<%=basePath%>view/css/form-elements.css">
	</head>

	<body class="">
		<section class="vbox">
			<section>
				<section class="hbox stretch">
					<section id="content">
						<section class="vbox">
							<header class="header bg-light b-b" style="padding-top: 10px;">
									<div class="row" style="text-align: center;padding: 10px 15px;font-family: '黑体';color: black;">
									<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
										<a href="javascript:addteacher();"><i class="fa fa-plus-square fa-fw m-r-xs"></i></a>
									</div>
								</div>
							</header>
							<section class="scrollable wrapper">
								<div class="">
									<ul class="list-group gutter list-group-lg list-group-sp sortable">
										<c:choose>
											<c:when test="${not empty teachers}">
												<c:forEach items="${teachers}" var="teacher">
													<li id="li${teacher.id }" class="list-group-item bo-no te-cen bc-tra">
														<div class="row">
															<span class="pull-right col-lg-2 col-md-2 col-sm-2 col-xs-2">
                      										<a href="javascript:editteacher(${teacher.id });" title="编辑"><i class="fa fa-pencil fa-fw m-r-xs"></i></a>
                     										<a href="javascript:delteacher(${teacher.id });" title="删除"><i class="fa fa-times fa-fw"></i></a>                  
                  											</span>
															<span id="teacherNumber${teacher.id }" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-md-offset-1">${teacher.teacherNumber }</span>
															<span id="teacherName${teacher.id }" class="col-lg-2 col-md-2 col-sm-2 col-xs-2">${teacher.teacherName }</span>
															<span id="teacherSex${teacher.id }" class="col-lg-1 col-md-1 col-sm-1 col-xs-1">${teacher.sex }</span>
															<span id="teacherGoodAt${teacher.id }" class="col-lg-2 col-md-2 col-sm-2 col-xs-2">${teacher.goodAt }</span>
															<span id="teacherPhone${teacher.id }" class="col-lg-2 col-md-2 col-sm-2 col-xs-2">${teacher.phoneNumber }</span>
														</div>
													</li>
												</c:forEach>
											</c:when>
										</c:choose>
									</ul>
									<div id="addDiv" class="col-sm-6 col-sm-offset-3" style="position: absolute;top:0px;display: none;">
										<form action="teacher/saveTeacher.html" method="post" data-validate="parsley">
											<section class="panel" style="background-color:rgba(0,0,0,0.3);color:black;">
												<header class="panel-heading">
													<span class="h4">教师</span><span id="cancel" class="pull-right"><li class="fa fa-times"></li></span>
												</header>
												<div class="panel-body" style="height:500px;overflow:auto;">
													<input id="divId" type="hidden" name="teacherId" class="form-control" data-required="true">
													<div class="form-group">
														<label>编号</label>
														<input id="divNumber" type="text" name="teacherNumber" class="form-control" data-required="true">
													</div>
													<div class="form-group">
														<label>姓名</label>
														<input id="divName" type="text" name="teacherName" data-required="true" class="form-control">
													</div>
													<div class="form-group">
														<label>性别</label>
														<input id="divSex" type="text" name="sex" data-required="true" class="form-control">
													</div>
													<div class="form-group">
														<label>年龄</label>
														<input id="divAge" type="text" name="age" data-required="true" class="form-control">
													</div>
													<div class="form-group">
														<label>手机号</label>
														<input id="divPhoneNumber" type="text" name="phoneNumber" data-required="true" class="form-control">
													</div>
													<div class="form-group">
														<label>地址</label>
														<input id="divGoodAt" type="text" name="goodAt" data-required="true" class="form-control">
													</div>
													<div class="form-group col-sm-offset-4">
														<button type="submit" class="col-sm-6 btn btn-success btn-s-xs">添加</button>
													</div>
												</div>
											</section>
										</form>
									</div>
								</div>
							</section>
						</section>
						<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
					</section>
				</section>
			</section>
		</section>
		<script src="<%=basePath%>view/js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="<%=basePath%>view/js/bootstrap.min.js"></script>
		<!-- App -->
		<script src="<%=basePath%>view/js/app.js"></script>
		<script src="<%=basePath%>view/js/jquery.slimscroll.min.js"></script>
		<script src="<%=basePath%>view/js/app.plugin.js"></script>
  		<script src="<%=basePath%>view/js/Tips.js"></script>
		<script type="text/javascript">
			function addteacher(){
				$("#addDiv").fadeIn();
			}
			document.getElementById('cancel').addEventListener('click',function(){
				$("#addDiv").hide();
			});
			function editteacher(teacherId){
				$("#divId").val(teacherId);
				$("#divteacherID").val($("#teacherNumber"+teacherId).text());
				$("#divName").val($("#teacherName"+teacherId).text());
				$("#divteacherDescription").val($("#teacherDescription"+teacherId).text());
				$("#addDiv").fadeIn();
			}
			function delteacher(teacherId){
				var txt=  "确认删除？删除后不可恢复！";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning,{
						onOk: function(){
							var url = "good/delteacher.html?teacherId="+teacherId;
							$.get(url,function(data){
								if(data=="success"){
									$("#li"+teacherId).remove();
								}
							});
						}
					});
			}
		</script>
	</body>
</html>